<template>

  <div class="body" v-if="show">
    <!-- 头部 -->
    <div class="header">
      <div class="header-title"><p>基本信息</p></div>
      <div class="base-input">
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm form clear"
        >
          <el-form-item label="客户名称：" prop="aname" class="form-item">
            <el-select v-model="ruleForm.aname">
              <el-option v-for="item in uNameOptions" :key="item" :value="item">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="收款方式：" prop="payType" class="form-item">
            <el-select v-model="ruleForm.payType">
              <el-option
                v-for="item in payTypeOptions"
                :key="item"
                :value="item"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="业务员：" prop="oname" class="form-item">
            <el-select v-model="ruleForm.oname">
              <el-option
                v-for="item in ohNameOptions"
                :key="item"
                :value="item"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="出货仓库：" prop="depot" class="form-item">
            <el-select v-model="ruleForm.depot">
              <el-option
                v-for="item in outDepotOptions"
                :key="item"
                :value="item"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <!-- <el-form-item label="跟车配送员：" class="form-item">
            <el-input v-model="ruleForm.sender"></el-input>
          </el-form-item> -->
        </el-form>
      </div>
    </div>

    <!-- 中间数据第一部分 -->
    <div class="content">
      <div class="title"><p>选择商品</p></div>
      <div class="form-wrap">
        <el-form
          :inline="true"
          :model="formInline"
          class="demo-form-inline form"
        >
          <!-- <el-form-item label="选择品牌:">
                        <el-select v-model="formInline.brand" >
                            <el-option
                                v-for="item in brandOptions"
                                :key="item"
                                :value="item">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="选择分类:">
                        <el-select v-model="formInline.class" >
                        <el-option
                                v-for="item in classOptions"
                                :key="item"
                                :value="item">
                            </el-option>
                        </el-select>
                    </el-form-item> -->
          <el-form-item label="商品标题:">
            <el-input v-model="formInline.title"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              @click="onSubmit(formInline.title, page, size)"
              >搜索</el-button
            >
          </el-form-item>
        </el-form>
        <!-- 搜索结果 -->
        <div class="search-wrap">
          <div class="title"><p>搜索结果</p></div>
          <div>
            <el-table :data="tableData" border style="width: 100%" > 
              <!-- <el-table-column
                            prop="id"
                            label="编号"
                            width="180">
                            </el-table-column> -->
              <el-table-column prop="name" label="商品名称">
              </el-table-column>
              <el-table-column prop="bigUnit" label="大单位" >
              </el-table-column>
              <el-table-column prop="bigPrice" label="大单位单价">
              </el-table-column>
              <el-table-column prop="smallUnit" label="小单位">
              </el-table-column>
              <el-table-column prop="smallPrice" label="小单位价格">
              </el-table-column>
              <el-table-column prop="inventory" label="现有库存">
              </el-table-column>
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-button
                    @click="handleAdd(scope.row.id)"
                    type="text"
                    size="small"
                    >添加</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div class="page-wrap">
            <el-pagination
              background
              layout="prev, pager, next"
              :total="total"
              class="page"
              :page-size="size"
              @current-change="currentChange"
            >
            </el-pagination>
          </div>
        </div>
      </div>
    </div>

    <!-- 中间数据第二部分 -->
    <div class="data">
      <div class="title"><p>商品明细</p></div>
      <!-- <GoodsDetails/> -->
      <!-- <div class="sum">
                 <p>商品共：</p>
                 <p>金额合计：</p>
             </div> -->
      <div>
        <el-table :data="resultData" border style="width: 100%" class="result-data" :fit='true' >
          <el-table-column prop="name" label="商品名称" >
          </el-table-column>
          <el-table-column prop="bigUnit" label="单价/大单位" >
          </el-table-column>
          <el-table-column label="数量"  >
            <template slot-scope="scope">
              <el-input-number v-model="scope.row.bigCount" 
              @change="bigChange(scope.row.bigCount,scope.row.id,scope.row.smallCount)" size="mini" :min="1" :max="30" label="描述文字" class="count-number"></el-input-number>
              <!-- <span
                @click="
                  decrease(
                    scope.row.bigCount,
                    scope.row.id,
                    scope.row.smallCount
                  )
                "
                class="icon"
                >-</span
              >
              <span class="icon-num">{{ scope.row.bigCount }}</span>
              <span
                @click="
                  increase(
                    scope.row.bigCount,
                    scope.row.id,
                    scope.row.smallCount
                  )
                "
                class="icon"
                >+</span
              > -->
            </template>
          </el-table-column>
          <el-table-column prop="smallUnit" label="小单位价格">
          </el-table-column>
          <el-table-column label="数量">
            <template slot-scope="scope">
              <el-input-number v-model="scope.row.smallCount" 
              @change="smallChange(scope.row.bigCount,scope.row.id,scope.row.smallCount)" size="mini" :min="1" :max="30" label="描述文字" class="count-number"></el-input-number>
              <!-- <span
                @click="
                  reduce(scope.row.bigCount, scope.row.id, scope.row.smallCount)
                "
                class="icon"
                >-</span
              >
              <span class="icon-num">{{ scope.row.smallCount }}</span>
              <span
                @click="
                  raise(scope.row.bigCount, scope.row.id, scope.row.smallCount)
                "
                class="icon"
                >+</span
              > -->
            </template>
          </el-table-column>
          <el-table-column prop="money" label="金额">
            <!-- <template slot-scope="scope"><p>{{sum()(scope.row.countB,scope.row.countS)}}</p></template> -->
          </el-table-column>
          <el-table-column prop="protectedDate" label="生产日期">
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                @click="handleDelete(scope.row.id)"
                type="text"
                size="small"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <div class="sum">
          <template>
            <p>商品共：{{ this.resultData.length }}</p>
            <p>金额合计：{{ count }}</p>
          </template>
        </div>
      </div>
    </div>

    <!-- 付款信息 -->
    <div class="paydetails">
      <div class="title"><p>付款信息</p></div>
      <div class="pay">
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm form clear"
        >
          <el-form-item label="付款类型：" prop="payType" class="form-item">
            <el-select v-model="ruleForm.payType">
              <el-option
                v-for="item in payTypeOptions"
                :key="item"
                :value="item"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <!-- <span>客户余额：元</span> -->
      </div>
      <div class="bonus clear">
        <p>优惠金额：</p>
        <el-input class="money"></el-input>
      </div>
      <p class="must">应付款金额：{{ count }}元</p>
      <button @click="submit(count,ruleForm.depot,ruleForm.oname,ruleForm.payType,ruleForm.aname)">提交</button>
    </div>
  </div>
</template>


<script>
// import GoodsDetails from '../../components/Inventory/OutgoodsDetail.vue'
import {
  downRenderApi,
  submitNewApi,
  searchApi,
  addApi,
  goodsRenderApi,
  submitEditApi,
  renderAddApi,
  deleteListApi,
  increaseDApi,
} from "../../http/InventoryApi/AddOutApi";
export default {
  data() {
    return {
      //  基本信息
      show: true,
      ruleForm: {
        aname: "",
        payType: "",
        oname: "",
        depot: "",
        sender: "",
        payMent: "",
      },
      // 基本信息选择框渲染内容
      // 客户名称
      uNameOptions: [],
      // 付款方式
      payTypeOptions: [],
      // 业务员
      ohNameOptions: [],
      // 出库仓库
      outDepotOptions: [],

      // 搜索商品
      formInline: {
        brand: "",
        class: "",
        title: "",
      },
      // 搜索品牌
      // brandOptions:[],
      // // 选择分类
      // classOptions:[],

      // 搜索结果：
      tableData: [],

      // 添加之后的结果
      resultData: [],

      // 选择框不能为空规则
      rules: {
        aname: [{ required: true, message: "请选择客户", trigger: "change" }],
        payType: [
          { required: true, message: "请选择收款方式", trigger: "change" },
        ],
        oname: [
          { required: true, message: "请选择业务员", trigger: "change" },
        ],
        depot: [
          { required: true, message: "请选择出货仓库", trigger: "change" },
        ],
      },
      page: 1,
      size: 5,
      total: null,
      searchState: 0,
      // 最后提交的结果
    };
  },
  computed: {
    // 金额
    // sum() {
    //     function count(countB,countS) {
    //         return countB*this.num+countS*this.cout
    //     }
    //     return count
    // },
    // 金额合计
    count() {
      var all = 0;
      for (let i = 0; i < this.resultData.length; i++) {
        all += this.resultData[i].money;
      }
      //    return this.resultData.reduce((a,b)=>{
      //     return a+b
      //     },0)
      return all;
    },
  },
  activated() {
    // 下拉框渲染
    this.downRender();
    // 编辑渲染
    this.editRender();
    this.goodsRender(this.page, this.size);
    this.searchState = 0;
    this.renderResults();
  },
  deactivated() {
    this.show = false;
    this.$nextTick(() => {
      this.resultData = [];
      this.show = true;
    });
  },
  beforeRouteUpdate() {
    this.ruleForm.id = "";
      this.ruleForm.aname = "";
      this.ruleForm.payType = "";
      this.ruleForm.oname = ""
      this.ruleForm.depot = ""
      this.ruleForm.createDate = "";
      this.ruleForm.state = "";
      this.ruleForm.comments = "";
      this.resultData=[]
  },
  updated() {
    // console.log(this.resultData.amount)
  },
  methods: {
     // 大单位添加
    bigChange(bigCount, id, smallCount) {
      console.log(bigCount, id, smallCount,'777')
      increaseDApi(bigCount, id, smallCount).then((res) => {
        console.log(res, "增加 ");
        this.renderResults();
      });
    },
   
    // increase(bigCount, id, smallCount) {
    //   bigCount = bigCount + 1;
    //   console.log(55);
    //   increaseDApi(bigCount, id, smallCount).then((res) => {
    //     console.log(res, "增加 ");
    //     this.renderResults();
    //   });
    // },
    // // 大单位减少
    // decrease(bigCount, id, smallCount) {
    //   if (bigCount >= 1) {
    //     bigCount = bigCount - 1;
    //     increaseDApi(bigCount, id, smallCount).then((res) => {
    //       console.log(res, "减少 ");
    //       this.renderResults();
    //     });
    //   } else {
    //     bigCount;
    //   }
    // },
    // 小单位添加
    smallChange(bigCount, id, smallCount) {
      console.log(bigCount, id, smallCount,'777')
      increaseDApi(bigCount, id, smallCount).then((res) => {
        console.log(res, "增加 ");
        this.renderResults();
      });
    },
    
    // raise(bigCount, id, smallCount) {
    //   smallCount = smallCount + 1;
    //   increaseDApi(bigCount, id, smallCount).then(() => {
    //     this.renderResults();
    //   });
    // },
    // // 小单位减少
    // reduce(bigCount, id, smallCount) {
    //   if (bigCount >= 1) {
    //     smallCount = smallCount - 1;
    //     increaseDApi(bigCount, id, smallCount).then(() => {
    //       this.renderResults();
    //     });
    //   } else {
    //     smallCount;
    //   }
    // },
    // 下拉框渲染
    downRender() {
      downRenderApi()
        .then((res) => {
          let data = res.data.data;
          for (let i = 0; i < data.length; i++) {
            this.uNameOptions.push(data[i].uname);
            this.ohNameOptions.push(data[i].oname);
            this.outDepotOptions.push(data[i].depot);
            this.payTypeOptions.push(data[i].payType);
          }
          this.uNameOptions = [...new Set(this.uNameOptions)];
          this.ohNameOptions = [...new Set(this.ohNameOptions)];
          this.outDepotOptions = [...new Set(this.outDepotOptions)];
          this.payTypeOptions = [...new Set(this.payTypeOptions)];
        })
        .catch((err) => {
          console.log("下拉框数据渲染获取失败", err);
        });
    },
    // 编辑数据渲染
    editRender() {
      this.ruleForm.id = this.$route.query.id;
      this.ruleForm.aname = this.$route.query.aname;
      this.ruleForm.payType = this.$route.query.payType;
      this.ruleForm.oname = this.$route.query.oname;
      this.ruleForm.depot = this.$route.query.depot;
      this.ruleForm.createDate = this.$route.query.createDate;
      this.ruleForm.state = this.$route.query.state;
      this.ruleForm.comments = this.$route.query.comments;
    },
    // 搜索商品渲染
    goodsRender(page, size) {
      goodsRenderApi(page, size)
        .then((res) => {
          this.tableData = res.data.data;
          this.total = res.data.total;
          console.log(res, "678", res.data.total);
        })
        .catch((err) => {
          console.log("商品列表渲染失败", err);
        });
    },
    //  根据条件搜索商品
    onSubmit(name, page, size) {
      this.searchState = 1;
      searchApi(name, page, size)
        .then((res) => {
          this.tableData = res.data.data;
          this.total = res.data.total;
          console.log("888", res);
        })
        .catch((err) => {
          console.log("获取搜索条件结果失败", err);
        });
    },
    // 渲染添加后的数据
    renderResults() {
      let orderId = this.$route.query.id ? this.$route.query.id : 0;
      // let orderId = 10018
      if (orderId) {
        renderAddApi(orderId)
          .then((res) => {
            this.resultData = res.data.data;
            console.log(this.resultData);
            console.log("添加结果渲染成功", res.data);
          })
          .catch((err) => {
            console.log("添加结果渲染失败", err);
          });
      } else {
        return false;
      }
      // 还需要一个添加接口
    },
    // 添加商品
    handleAdd(id) {
      let orderId = this.$route.query.id ? this.$route.query.id : 0;
      // let orderId = 10018
      console.log("上一级id", orderId);
      if (orderId) {
        // 渲染商品明细
        addApi(id, orderId)
          .then((res) => {
            console.log(res, "999");
            this.renderResults();
          })
          .catch((err) => {
            console.log("获得商品明细失败", err);
          });
        // 渲染
      }
      // 添加
    },

    // 删除
    handleDelete(id) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          console.log(id, "id");
          deleteListApi(id)
            .then(() => {
              // 删除之后再渲染一次
              let orderId = this.$route.query.id ? this.$route.query.id : 0;
              // let orderId = 10018
              renderAddApi(orderId)
                .then((res) => {
                  console.log(res);
                  this.resultData = res.data.data;
                })
                .catch((err) => {
                  console.log("获得商品明细失败", err);
                });
            })
            .catch((err) => {
              console.log("接口请求删除失败：", err);
            });

          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 点击换页数
    currentChange(page) {
      this.page = page;
      if (!this.searchState) {
        this.goodsRender(page, this.size);
      } else {
        this.onSubmit(this.formInline.title, page, this.size);
      }
    },
    // 提交信息
    submit(amount,depot,oName,payType,uName) {
      let orderId = this.$route.query.id ? this.$route.query.id : 0;
      if (orderId) {
        submitEditApi(amount,depot,orderId,oName,payType,uName)
         .then((res)=>{
          console.log(res)
             
            this.$router.push("/outmangement/out");
         })
      } else {
        submitNewApi();
        // 跳转路由
        this.$router.push("/outmangement/out");
      }
    },
  },
};
</script>


<style lang="scss" scoped>
@import "../../assets/sass/var.scss";
.body {
  .header {
    width: 90%;
    margin: 0 5% 0;
    .header-title {
      height: 50px;
      background: $background-color;
      line-height: 50px;
      font-size: 12px;
      color: $context-color;
      p {
        margin-left: 10px;
      }
    }
    .base-input {
      height: 140px;
      border: solid 1px rgb(225, 225, 225);
      box-sizing: border-box;
      .form {
        margin-top: 20px;
        .form-item {
          float: left;
        }
      }
    }
  }
  .content {
    width: 90%;
    margin: 20px 5% 0;
    border: solid 1px rgb(225, 225, 225);
    .title {
      height: 50px;
      background: $background-color;
      p {
        font-size: 12px;
        color: $context-color;
        line-height: 50px;
        margin-left: 10px;
      }
    }
    .form {
      margin-top: 20px;
      margin-left: 20px;
    }
    .search-wrap {
      width: 90%;
      margin: 20px 5% 0;
      .page-wrap {
        height: 50px;
        .page {
          float: right;
          margin-top: 10px;
        }
      }
    }
  }
  .data {
    width: 90%;
    margin: 20px 5% 0;
    border: solid 1px rgb(225, 225, 225);
    .title {
      height: 50px;
      background: $background-color;
      p {
        line-height: 50px;
        font-size: 12px;
        margin-left: 10px;
      }
    }
    .result-data {
      .count-number {
        width: 100px;
        // padding:0 20px;
        box-sizing:border-box;
      }
  }
    .sum {
      margin-left: 20px;
      height: 50px;
      p {
        font-size: 20px;
        margin-right: 20px;
        float: left;
        line-height: 50px;
      }
    }
    .icon {
      display: inline-block;
      font-size: 30px;
      padding: 0 10px;
    }
    .icon-num {
      display: inline-block;
      font-size: 18px;
    }
  }
  .paydetails {
    width: 90%;
    margin: 20px 5%;
    border: solid 1px rgb(225, 225, 225);
    .title {
      height: 50px;
      background: $background-color;
      p {
        line-height: 50px;
        font-size: 12px;
        margin-left: 10px;
      }
    }
    .form {
      margin-top: 10px;
      float: left;
    }
    .pay {
      height: 73px;
      span {
        height: 50px;
        display: inline-block;
        line-height: 50px;
        margin-left: 20px;
        padding-top: 5px;
        box-sizing: border-box;
        font-size: 12px;
      }
    }
    .bonus {
      height: 50px;
      margin-left: 20px;
      p {
        float: left;
        font-size: 14px;
        margin-top: 10px;
      }
      .money {
        width: 223px;
        margin-left: 10px;
      }
    }
    .must {
      margin-left: 20px;
    }

    button {
      width: 200px;
      height: 40px;
      margin-left: 30px;
      margin-top: 20px;
      background: $panel-color;
      border: none;
      border-radius: 5px;
      color: white;
      margin-bottom: 20px;
    }
  }
}
</style>